// 引入了 Input 类
import { Component, OnInit, Input } from '@angular/core';
// 引入 hero 类
import { Hero } from '../hero';
// 从一种新的途径获取要显示的英雄。
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { HeroService }  from '../hero.service';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
  // ActivatedRoute 保存着到这个 HeroDetailComponent 实例的路由信息。 这个组件对从 URL 中提取的路由参数感兴趣。 其中的 id 参数就是要显示的英雄的 id。
  // HeroService 从远端服务器获取英雄数据，本组件将使用它来获取要显示的英雄。
  // location 是一个 Angular 的服务，用来与浏览器打交道。 稍后，你就会使用它来导航回上一个视图。
  // 通过 hero 属性接收一个英雄对象，并显示它
  @Input() hero: Hero;
  constructor(
    private route: ActivatedRoute,
    private heroService: HeroService,
    private location: Location
  ) { 
    
  }

  ngOnInit() {
    this.getHero();
  }

  getHero(): void {
    // paramMap 是一个从 URL 中提取的路由参数值的字典
    // "id" 对应的值就是要获取的英雄的 id。
    // 方法就是 先从地址栏上获取 id,再调用 heroService 里的 getHero 获取id,getHero 又调用 find 方法查找 
    
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
      .subscribe(hero => this.hero = hero);
  }

  goBack(): void {
    // 利用你以前注入的 Location 服务在浏览器的历史栈中后退一步。
    this.location.back();
  }

  save(): void {
    this.heroService.updateHero(this.hero)
      .subscribe(() => this.goBack());
  }
}
